<template>
	<view class="medical-verify">
		<!-- Content -->
		<view class="content">
			<h2 class="upload-title">拍照上传病例资料</h2>
			<p class="upload-desc">上传任意时期的确诊病历/处方单/检查报告</p>

			<view class="tips">
				<view class="tips-header">
					<img src="https://cdn-icons-png.flaticon.com/128/1042/1042339.png" class="camera-icon"
						alt="camera" />
					<span>"像拍身份证那样拍清晰！"</span>
				</view>
				<view class="requirements">
					<h3>三个要点要记牢：</h3>
					<view class="requirement-item">
						<span class="number">1</span>
						<span class="text">把检查单放桌上拍</span>
					</view>
					<view class="requirement-item">
						<span class="number">2</span>
						<span class="text">四个角都要进框里</span>
					</view>
					<view class="requirement-item">
						<span class="number">3</span>
						<span class="text">避开手指和阴影</span>
					</view>
				</view>
			</view>

			<view class="examples">
				<view class="example">
					<view class="example-image" @click="previewImage('correct')">
						<img src="https://www.ruilongan.com/profile/upload/2025/06/25/huayan_20250625100841A043.jpg"
							alt="正确示例" />
						<view class="corner-bl"></view>
						<view class="corner-br"></view>
					</view>
					<p>正确示例（示例）</p>
				</view>
				<view class="example">
					<view class="example-image" @click="previewImage('error')">
						<img src="https://www.ruilongan.com/profile/upload/2025/06/25/huayan_20250625100841A043.jpg"
							alt="错误示例" />
						<view class="corner-bl"></view>
						<view class="corner-br"></view>
					</view>
					<p>错误示例（示例）</p>
				</view>
			</view>

			<view class="upload-area">
				<!-- 已选择图片时的展示 -->
				<view class="selected-image-container" v-if="imageList.length > 0">
					<img :src="imageList[0]" class="selected-image" mode="aspectFit" />
					<view class="delete-icon" @click.stop="deleteImage">×</view>
				</view>
				<!-- 未选择图片时的默认展示 -->
				<view class="camera-content" v-else @click="chooseImage">
					<img src="https://www.ruilongan.com/profile/upload/2025/06/25/xiangji_20250625103710A046.png" class="camera-upload" alt="camera" />
					<view class="upload-text">
						点击拍照上传
					</view>
					<img src="https://www.ruilongan.com/profile/upload/2025/06/25/dianji_20250625102713A045.png" class="hand-icon" alt="hand"/>
				</view>
			</view>

			<button class="submit-btn" :class="{ active: imageList.length > 0 }">提交验证</button>

			<p class="disclaimer">"完成验证每日获取积分，可兑换试营养餐包、专家问诊等健康权益"</p>
		</view>

		<!-- Footer -->
		<view class="footer">
			<view class="footer-text">"您的医疗数据：采用银行级加密存储储存时可联系客服注销"</view>
			<view class="hotline" @click="clickCell('400-698-9967')">
				<img src="https://api.iconify.design/material-symbols:security.svg" class="phone-icon" />
				400-698-9967
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'MedicalVerify',
		data() {
			return {
				imageList: [],
				exampleImages: {
					correct: 'https://www.ruilongan.com/profile/upload/2025/06/25/huayan_20250625100841A043.jpg',
					error: 'https://www.ruilongan.com/profile/upload/2025/06/25/huayan_20250625100841A043.jpg'
				}
			}
		},
		methods: {
			clickCell(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);
					}
				})
			},
			chooseImage() {
				uni.showActionSheet({
					itemList: ['拍照', '从相册选择'],
					success: (res) => {
						if (res.tapIndex === 0) {
							// 拍照
							this.takePhoto()
						} else if (res.tapIndex === 1) {
							// 从相册选择
							this.pickFromAlbum()
						}
					}
				})
			},
			takePhoto() {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: (res) => {
						this.handleImageSuccess(res)
					},
					fail: (err) => {
						console.error('拍照失败', err)
						uni.showToast({
							title: '拍照失败',
							icon: 'none'
						})
					}
				})
			},
			pickFromAlbum() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: (res) => {
						this.handleImageSuccess(res)
					},
					fail: (err) => {
						console.error('选择图片失败', err)
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						})
					}
				})
			},
			handleImageSuccess(res) {
				const tempFilePaths = res.tempFilePaths
				this.imageList = tempFilePaths
				// TODO: 这里可以添加图片上传到服务器的逻辑
				console.log('选择的图片：', tempFilePaths)
				uni.showToast({
					title: '选择成功',
					icon: 'success'
				})
			},
			previewImage(type) {
				uni.previewImage({
					current: this.exampleImages[type],
					urls: [this.exampleImages[type]],
					indicator: 'default',
					loop: false,
					success: () => {
						console.log('预览成功');
					},
					fail: (err) => {
						console.error('预览失败', err);
						uni.showToast({
							title: '预览失败',
							icon: 'none'
						});
					}
				});
			},
			deleteImage() {
				this.imageList = []
				uni.showToast({
					title: '已删除',
					icon: 'success'
				})
			}
		}
	}
</script>

<style scoped>
	.medical-verify {
		padding: 24px;
		min-height: 100vh;
		background: #ffffff;
	}

	.title {
		font-size: 18px;
		font-weight: 500;
	}

	.content {
		padding: 20px 16px;
	}

	.upload-title {
		font-size: 20px;
		font-weight: 500;
		margin-bottom: 8px;
	}

	.upload-desc {
		color: #C3C3C3;
		font-size: 12px;
		margin-bottom: 24px;
	}

	.tips {
		/* background: #fff;
  border-radius: 8px;
  padding: 16px; */
		margin-bottom: 40px;
	}

	.tips-header {
		display: flex;
		align-items: center;
		margin-bottom: 18px;
		color: #000;
		font-size: 16px;
	}

	.camera-icon {
		width: 24px;
		height: 24px;
		margin-right: 8px;
	}

	.requirements h3 {
		font-size: 14px;
		margin-bottom: 12px;
	}

	.requirement-item {
		display: flex;
		align-items: center;
		margin-bottom: 12px;
		font-size: 14px;
	}

	.number {
		width: 24px;
		height: 24px;
		background: #4CAF50;
		color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 8px;
	}

	.examples {
		display: flex;
		justify-content: space-between;
		margin-bottom: 24px;
		width: 100%;
	}

	.example {
		flex: 1;
		padding: 4px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.example-image {
		position: relative;
		width: 132px;
		height: 92px;
		margin-bottom: 8px;
	}

	.example-image img {
		width: calc(100% - 6px);
		height: calc(100% - 6px);
		display: block;
		object-fit: cover;
		position: absolute;
		top: 2px;
		left: 2px;
	}

	.example-image::before,
	.example-image::after,
	.example-image .corner-bl,
	.example-image .corner-br {
		content: '';
		position: absolute;
		width: 15px;
		height: 15px;
		border-color: #2196F3;
		border-style: solid;
		border-width: 0;
		pointer-events: none;
		z-index: 1;
	}

	/* 左上角 */
	.example-image::before {
		top: 0;
		left: 0;
		border-top-width: 3px;
		border-left-width: 3px;
	}

	/* 右上角 */
	.example-image::after {
		top: 0;
		right: 0;
		border-top-width: 3px;
		border-right-width: 3px;
	}

	/* 左下角 */
	.example-image .corner-bl {
		bottom: 0;
		left: 0;
		border-bottom-width: 3px;
		border-left-width: 3px;
	}

	/* 右下角 */
	.example-image .corner-br {
		bottom: 0;
		right: 0;
		border-bottom-width: 3px;
		border-right-width: 3px;
	}

	.example p {
		font-size: 14px;
		color: #333;
		text-align: center;
		margin-top: 4px;
	}

	.upload-area {
		background: #fff;
		border: 1px dashed #DDDDDD;
		border-radius: 8px;
		padding: 20px;
		margin: 20px auto;
		width: 85%;
		position: relative;
		min-height: 140px;
		box-sizing: border-box;
	}

	.selected-image-container {
		width: 100%;
		height: 140px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.selected-image {
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		object-fit: contain;
		border-radius: 4px;
	}

	.delete-icon {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 24px;
		height: 24px;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 18px;
		z-index: 2;
	}

	.camera-content {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		padding: 10px 0;
	}

	.camera-upload {
		width: 102px !important;
		height: 72px !important;
		margin-bottom: 8px;
	}

	.upload-text {
		color: #4CD080;
		font-size: 14px;
		white-space: nowrap;
		letter-spacing: 5px;
	}

	.upload-area .hand-icon {
		width: 54px !important;
		height: 54px !important;
		position: absolute;
		right: 20px;
		bottom: 10px;
	}

	.submit-btn {
		width: 100%;
		background: #e0e0e0;
		color: #000000;
		border: none;
		border-radius: 8px;
		padding: 4px;
		font-size: 16px;
		margin-bottom: 16px;
	}

	.submit-btn.active {
		background: #4CD080;
		color: #fff;
	}

	.footer {
		text-align: center;
		margin-top: 10px;
	}

	.footer-text {
		font-size: 14px;
		color: #979797;
		margin-bottom: 10px;
	}

	.hotline {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1696FF;
		font-size: 14px;
	}

	.phone-icon {
		width: 18px;
		height: 18px;
		margin-right: 5px;
		color: #1696FF;
	}

	.disclaimer {
		color: #999;
		font-size: 12px;
		margin: 16px auto;
		text-align: left;
		width: 85%;
		line-height: 1.5;
	}
</style>